<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
  <title>new record</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/record/new.css">
  <script src="js/jquery/jquery-2.1.4.min.js"></script>
  <link href="js/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="js/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
  <script type="text/javascript">
  SyntaxHighlighter.all();
  </script>
<!--   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> -->
</head>
<body>
<div id="container">
    <div id="head_div" style="height:55px">
    	    	<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand nav-logoname" href="record">EasyNote</a>
   </div>
   <div>
       <label class="navbar-text nav-time">2015-10-17 12:23:12</label>
   </div>
</nav>
    </div>
    <div>
		<div id="left_div"></div>
		<div id="center_div">
		    	      
		    	<form class="form-inline" role="form">
			      <div class="input-group" >
			         <span class="input-group-addon">标题:</span>
			         <input type="text" class="form-control" id="title">
			      </div>
                  <br>
			    <script id="editor" type="text/plain" style="width:948px;height:500px;"></script>

			    <input type="text" class="form-control" id="ipt_tags" placeholder="请输入标签项,标签之间以逗号分割如： 生活,体育,计算机">
            
                      <select class="form-control" id="item_list">

      </select>
      <br>
      <div class="tag_set">
      <div class="rectag tag0">
      	<label>JAVA</label>
      </div>

      <div class="rectag tag1" style="margin-left: 40px;">
      	<label>JAVA</label>
      </div>
            <div class="rectag tag2" style="margin-left: 40px;">
      	<label>JAVA</label>
      </div>
            <div class="rectag tag3" style="margin-left: 40px;">
      	<label>JAVA</label>
      </div>
            <div class="rectag tag4" style="margin-left: 40px;">
      	<label>JAVA</label>
      </div>
       <div class="rectag tag5" style="margin-left: 40px;">
      	<label>JAVA</label>
      </div>
                  <div class="rectag tag6" style="margin-left: 40px;">
      	<label>JAVA</label>
      </div>
                  <div class="rectag tag7" style="margin-left: 40px;">
      	<label>JAVA</label>
      </div>
      </div>


                <hr>
			    <button class="btn btn-default" id="cancel">Cancel</button>
			    <button class="btn btn-default" id="commit">Commit</button>
			 
			    </form>

		   
		</div>
		<div id="right_div"></div>
	</div>	
	<div id="foot_div"></div>
</div>
</body>
<!-- 配置文件 -->
<script type="text/javascript" src="js/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="js/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    UE.getEditor('editor');
</script>
<script type="text/javascript">
	$("#commit").click(function(e){

		var obj=new Object();
		obj.title=$("#title").val();
		obj.content=UE.getEditor('editor').getContent();
		if(obj.title.length==0 || obj.content.length==0)
		{
			alert("标题和内容不能为空");
			e.preventDefault();
			return;
		}
		obj.simpletext=UE.getEditor('editor').getPlainTxt();
		obj.tag=$("#ipt_tags").val();
    obj.itemid=$("#item_list").val();
		$.post("/record/add",obj,function(data){

			window.location.href="record/show/"+data;

		});
		e.preventDefault();
	});
	$(".rectag").hide();
	$("#ipt_tags").on("input",function(){

		var str=$("#ipt_tags").val();
		var tagArray= new Array(); 
		str=str.replace(/，/g, ",");
		tagArray=str.split(",");
        $(".rectag").hide();
		for(var i=0;i<tagArray.length;i++)
		{
			if(tagArray[i].length>0)
			{
			    $(".tag"+i+">label").html(tagArray[i]);
			    $(".tag"+i).show();
		    }
		}
	});

       function showItemList()
     {
        $.get("/record/showItemList",function(data){
            $("#item_list").empty();

            for(var i=0;i<data.length;i++)
            {
                var str="<option value='"+data[i].id+"'>"+data[i].iname+"</option>";
                $("#item_list").append(str);
            }
        });
     }
    showItemList();

</script>
</html>
